<template>
	<div>
		<pol-title title="铸流生产信息表"></pol-title>
		<div class="padding border-solid bg-tm radius-sm">
			<!-- 表格 -->
			<pol-table ref="polTableRef" v-bind="tableOpt" height="300px">
				<template #P_IsReadOnly="{ row }">
					<div class="td-bg cursor" v-if="row.P_IsReadOnly" @click="jjqEidt(row)">
						<span class="tb-bg-span">{{row.P_IsReadOnly}}</span>
					</div>
				</template>
			</pol-table>
		</div>
		
		<el-dialog v-model="dialogPlanPopup" title="结晶器设备信息" width="800" center align-center class="search-light">
			<div class="padding">
				<div class="flex align-center text-black padding-bottom">
					<span>结晶器浇次ID号</span>
					<div class="lc-input">二级炉次</div>
				</div>
				
				<div class="text-lg margin-top-lg">结晶器设备信息</div>
				
				<el-divider content-position="left">铸流1</el-divider>
				<div class="flex align-center">
					<div class="flex align-center flex-sub">
						<span class="margin-right">设备信息</span>
						<el-input class="flex-sub" v-model="input" placeholder="" size="large" />
					</div>
					<div class="flex align-center flex-sub margin-left-xl">
						<span class="margin-right">起步炉数</span>
						<el-input class="flex-sub" v-model="input2" placeholder="" size="large" />
					</div>
				</div>
				
				<el-divider content-position="left">铸流2</el-divider>
				<div class="flex align-center">
					<div class="flex align-center flex-sub">
						<span class="margin-right">设备信息</span>
						<el-input class="flex-sub" v-model="input" placeholder="" size="large" />
					</div>
					<div class="flex align-center flex-sub margin-left-xl">
						<span class="margin-right">起步炉数</span>
						<el-input class="flex-sub" v-model="input2" placeholder="" size="large" />
					</div>
				</div>
				
				<el-divider content-position="left">铸流3</el-divider>
				<div class="flex align-center">
					<div class="flex align-center flex-sub">
						<span class="margin-right">设备信息</span>
						<el-input class="flex-sub" v-model="input" placeholder="" size="large" />
					</div>
					<div class="flex align-center flex-sub margin-left-xl">
						<span class="margin-right">起步炉数</span>
						<el-input class="flex-sub" v-model="input2" placeholder="" size="large" />
					</div>
				</div>
				
				<el-divider content-position="left">铸流4</el-divider>
				<div class="flex align-center">
					<div class="flex align-center flex-sub">
						<span class="margin-right">设备信息</span>
						<el-input class="flex-sub" v-model="input" placeholder="" size="large" />
					</div>
					<div class="flex align-center flex-sub margin-left-xl">
						<span class="margin-right">起步炉数</span>
						<el-input class="flex-sub" v-model="input2" placeholder="" size="large" />
					</div>
				</div>
				<div class="flex justify-end padding-bottom padding-right margin-top">
					<el-button type="primary" class="btn-bg-blue padding-lr-xl margin-top-lg" size="large">保存</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref } from 'vue';

	//表格配置
	const columns = ref([
		{ label: '铸流序号', key: 'ItemCode', align: 'center', width: '100px' },
		{ label: '状态', key: 'ItemName', align: 'center' },
		{ label: '拉速', key: 'ItemValue', align: 'center' },
		{ label: '断面', key: 'IsDefault', align: 'center' },
		{ label: '浇次ID号', key: 'P_IsSys', align: 'center' },
		{ label: '结晶器ID', key: 'P_IsReadOnly', align: 'center', width: '100px', slot: true },
		{ label: '浇注炉数', key: 'gangbao', align: 'center' },
		{ label: '浇铸时长（h）', key: 'kaishi', align: 'center', width: '140px' },
		{ label: '铸坯数量', key: 'chongzhi', align: 'center' },
		{ label: '铸坯长度', key: 'gangzhong', align: 'center' },
		{ label: '切割定尺', key: 'caozhuo', align: 'center' },
		{ label: '二冷模式', key: 'erleng', align: 'center' },
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: '1',
				ItemName: '正在浇注',
				ItemValue: '0',
				IsDefault: '0.53*0.41',
				P_IsSys: '20220072',
				P_IsReadOnly: '0',
				gangbao: '25',
				kaishi: '25.0',
				chongzhi: '83',
				gangzhong: '564.989',
				caozhuo: '0',
				erleng: '注册失'
			},
			{
				ItemCode: '2',
				ItemName: '正在浇注',
				ItemValue: '0',
				IsDefault: '0.53*0.41',
				P_IsSys: '20220072',
				P_IsReadOnly: '0',
				gangbao: '25',
				kaishi: '25.0',
				chongzhi: '83',
				gangzhong: '564.989',
				caozhuo: '0',
				erleng: '注册失'
			},
			{
				ItemCode: '3',
				ItemName: '正在浇注',
				ItemValue: '0',
				IsDefault: '0.53*0.41',
				P_IsSys: '20220072',
				P_IsReadOnly: '0',
				gangbao: '25',
				kaishi: '25.0',
				chongzhi: '83',
				gangzhong: '564.989',
				caozhuo: '0',
				erleng: '注册失'
			},
			{
				ItemCode: '4',
				ItemName: '正在浇注',
				ItemValue: '0',
				IsDefault: '0.53*0.41',
				P_IsSys: '20220072',
				P_IsReadOnly: '0',
				gangbao: '25',
				kaishi: '25.0',
				chongzhi: '83',
				gangzhong: '564.989',
				caozhuo: '0',
				erleng: '注册失'
			},
			{
				ItemCode: '5',
				ItemName: '正在浇注',
				ItemValue: '0',
				IsDefault: '0.53*0.41',
				P_IsSys: '20220072',
				P_IsReadOnly: '0',
				gangbao: '25',
				kaishi: '25.0',
				chongzhi: '83',
				gangzhong: '564.989',
				caozhuo: '0',
				erleng: '注册失'
			},
			{
				ItemCode: '6',
				ItemName: '正在浇注',
				ItemValue: '0',
				IsDefault: '0.53*0.41',
				P_IsSys: '20220072',
				P_IsReadOnly: '0',
				gangbao: '25',
				kaishi: '25.0',
				chongzhi: '83',
				gangzhong: '564.989',
				caozhuo: '0',
				erleng: '注册失'
			},
			{
				ItemCode: '7',
				ItemName: '正在浇注',
				ItemValue: '0',
				IsDefault: '0.53*0.41',
				P_IsSys: '20220072',
				P_IsReadOnly: '0',
				gangbao: '25',
				kaishi: '25.0',
				chongzhi: '83',
				gangzhong: '564.989',
				caozhuo: '0',
				erleng: '注册失'
			},
			{
				ItemCode: '8',
				ItemName: '正在浇注',
				ItemValue: '0',
				IsDefault: '0.53*0.41',
				P_IsSys: '20220072',
				P_IsReadOnly: '0',
				gangbao: '25',
				kaishi: '25.0',
				chongzhi: '83',
				gangzhong: '564.989',
				caozhuo: '0',
				erleng: '注册失'
			},
			{
				ItemCode: '9',
				ItemName: '正在浇注',
				ItemValue: '0',
				IsDefault: '0.53*0.41',
				P_IsSys: '20220072',
				P_IsReadOnly: '0',
				gangbao: '25',
				kaishi: '25.0',
				chongzhi: '83',
				gangzhong: '564.989',
				caozhuo: '0',
				erleng: '注册失'
			},
			{
				ItemCode: '10',
				ItemName: '正在浇注',
				ItemValue: '0',
				IsDefault: '0.53*0.41',
				P_IsSys: '20220072',
				P_IsReadOnly: '0',
				gangbao: '25',
				kaishi: '25.0',
				chongzhi: '83',
				gangzhong: '564.989',
				caozhuo: '0',
				erleng: '注册失'
			}
		]
	});
	
	//结晶器编辑
	const dialogPlanPopup = ref(false)
	const input = ref('B2')
	const input2 = ref('1500')
	const jjqEidt = (row)=>{
		dialogPlanPopup.value = true
	}
</script>

<style lang="scss" scoped>
	.jcjz-box {
		flex: 0 0 410px;

		.progress-box {
			width: 170px;
			height: 170px;
			border: 1px solid #0474bf;
			border-radius: 50%;
		}

		.progress-content-box {
			width: 100px;
			height: 100px;
			margin-left: 20px;
			background-color: rgba(255, 255, 255, 0.05);
			border-radius: 50%;
			background-image: url('/src/assets/images/roun-bg.png');
			background-size: 100% 100%;
		}
	}
	
	.lc-input {
		width: 300px;
		margin-left: 10px;
		padding: 14px;
		border: 1px solid #e1e1e1;
		border-radius: 4px;
		background-color: #f1f1f1;
	}
</style>